import React, { ChangeEvent, useState, useRef } from "react";
import { useSsessionStorage } from "../../hooks/index";

interface Obje {
  id: number;
  name: string;
}
export default function Form() {
  const [token1, setToken1] = useSsessionStorage("token");
  console.log("-------token1", token1);

  const [obj, setObj] = useState<Obje>({
    id: 0,
    name: "",
  });

  console.log(obj.id);

  const [txt, setTxt] = useState("");
  const onTxtChange = (e: ChangeEvent<HTMLInputElement>) => {
    setTxt(e.target.value);
  };

  const onConsole1 = () => {
    console.log(txt);
  };

  const inputRef = useRef<HTMLInputElement>(null);
  const onConsole2 = () => {
    // 通过获取 input 节点来获取 value
    // console.log(document.getElementById("c2")!.value);
    console.log(inputRef.current!.value);
  };

  const onSet111 = () => {
    setToken1("22222222");
  };
  return (
    <div className="form">
      <h3>表单</h3>
      <hr />
      <h5>受控组件</h5>
      <input type="text" value={txt} onChange={onTxtChange} />
      <button onClick={onConsole1}>打印内容</button>

      <hr />
      <h5>非受控组件：直接通过 dom 节点来获取数据，而不是绑定数据</h5>
      <input type="text" id="c2" ref={inputRef} />
      <button onClick={onConsole2}>打印内容</button>

      <p>显示token的值：{token1}</p>
      <button onClick={onSet111}>修改</button>
    </div>
  );
}
